<template>
  <div>

    <el-descriptions title="数据统计" direction="vertical" :column="4" border style="width: 80%; margin: 0 auto;">
      <el-descriptions-item label="库存总量">{{ gethomelist.totalInventory.toFixed(2)
      }}</el-descriptions-item>
      <el-descriptions-item label="本年销售总额">{{ gethomelist.inventoryCosts.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="本周销售总额">{{ gethomelist.soldThisYear.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="本年采购额">{{ gethomelist.grossProfitForTheYear.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="库存成本">{{ gethomelist.thisWeeksTotal.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="本年销售毛利">{{ gethomelist.grossProfitThisWeek.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="本周销售毛利">{{ gethomelist.purchasedYear.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="本月采购额">{{ gethomelist.purchasedMonth.toFixed(2) }}</el-descriptions-item>
    </el-descriptions>

    <el-row :gutter="24">
      <el-col :span="12" :offset="0">
        <Evsecharts :option="option2" style="height: 400px; width: 100%;">
        </Evsecharts>
      </el-col>
      <el-col :span="12" :offset="0">
        <Evsecharts :option="option3" style="height: 400px; width: 100%;">
        </Evsecharts>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <Evsecharts :option="option4" style="height: 400px; width: 100%;">
        </Evsecharts>
      </el-col>
      <el-col :span="12" :offset="0">
        <Evsecharts :option="option5" style="height: 400px; width: 100%;">
        </Evsecharts>
      </el-col>
    </el-row>

    <div id="app">
      <button @click="receiveMessage">向后台发送请求</button>
      <p>展示信息(dataInfo)：</p>
      <h3>{{ dataInfo }}</h3>

      <p>接到的消息通知(msgs)：</p>
      <p v-for="(item, index) in msgs" :key="index">{{ item }}</p>
    </div>

  </div>
</template>
<script>

import { GetHome, ShowCount, ShowCountPro, ShowCountWarehouse, ShowproductDto } from "@/api/WarehouseServer/HomeServer";
import 'echarts';
import Evsecharts from 'vue-echarts';
export default {
  components: {
    Evsecharts
  },

  data() {
    return {

      option2: {},
      option3: {},
      option4: {},
      option5: {},

      gethomelist: {},
      creator: [], //销售人
      ordersSum: [], //销售金额

      name: [], //仓库名
      number: [], //仓库库存销售

      productName: [], //产品名
      price: [], //产品价格

      categoryName: [],//产品类别
      Proce: {},//产品百分比


      connection: null,
      msgs: [],
      dataInfo: "",
    }
  },
  watch: {

  },
  methods: {
    //销售
    SaledrawChart() {
      ShowCount().then((res) => {
        res.data.data.forEach((element) => {
          this.creator.push(element.creator);
          this.ordersSum.push(element.ordersSum);
        });

        this.option2 = {
          title: {
            text: "本季度-业务员销售排名",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: this.creator,
          },
          yAxis: {},
          series: [
            {
              name: "销售金额",
              type: "bar",
              data: this.ordersSum,
              itemStyle: {
                color: "rgba(30, 144, 255, 0.6)",
              },
            },
            {
              name: "销售金额",
              type: "line",
              data: this.ordersSum,
              itemStyle: {
                color: "rgba(30, 144, 255, 0.6)",
              },
            },


          ],
        };

      });
    },

    //仓库
    WaredrawChart() {
      ShowCountWarehouse().then((res) => {
        res.data.data.forEach((element) => {
          this.name.push(element.name);
          this.number.push(element.number);
        });

        this.option3 = {
          title: {
            text: "本季度-仓库销售比较分析",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: this.name,
          },
          yAxis: {},
          series: [
            {
              name: "销售库存",
              type: "bar",
              data: this.number,
              itemStyle: {
                color: "rgba(30, 144, 255, 0.6)", // 设置柱状图颜色为浅蓝色
              },
            },
          ],
        };

      });
    },
    //产品
    ProdrawChart() {
      ShowCountPro().then((res) => {
        res.data.data.forEach((element) => {
          this.productName.push(element.productName);
          this.price.push(element.price);
        });

        this.option4 = {
          title: {
            text: "本季度-客户销售比较分析",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: this.productName,
          },
          yAxis: {},
          series: [
            {
              name: "销量总价",
              type: "bar",
              data: this.price,
              itemStyle: {
                color: "rgba(30, 144, 255, 0.6)", // 设置柱状图颜色为浅蓝色
              },
            },
          ],
        };
      });
    },
    //产品
    fetchProductData() {
      ShowproductDto().then((res) => {
        if (Array.isArray(res.data.data)) {
          res.data.data.forEach((element) => {
            this.categoryName.push({ value: element.percentage.toFixed(2), name: element.categoryName });
          });
        } else {
          console.error("res.data.data is not an array");
        }

        this.option5 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '产品',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.categoryName
            }
          ],
        };
      });
    },
    //首页
    GetHome() {
      GetHome().then(res => {
        this.gethomelist = res.data;
        console.log(res.data);
      });
    }



  },
  mounted() {
    this.GetHome();
    this.SaledrawChart();
    this.WaredrawChart();
    this.ProdrawChart();
    this.fetchProductData();
  },
  created() {

  },
}
</script>

<style scoped>
#main {
  margin: left;
  margin-top: 100px;
  margin-left: 100px;
}

#main1 {
  margin: left;
  margin-top: 100px;
  margin-left: 100px;
}

#main2 {
  margin: left;
  margin-top: 100px;
  margin-left: 100px;
}
</style>
